折腾了大半天的时间终于搭建好了自己的博客。在网上随便一搜就有一大堆搭建博客的教程,那为什么还要再写一遍呢。原因如下:
- 网上绝大多数教程是基于 Windows 系统搭建的博客,在苹果系统上搭建博客的教程不多。
- 记录搭建博客过程中踩过的坑,帮助更多的小伙伴。
言归正传,接下来进入博客的搭建过程。
1. Node.js 下载和安装
下载地址:Node.js 下载地址
2. Git 的下载和安装
下载地址:Git 下载地址
3. Hexo 安装(重点)
打开苹果电脑终端
输入安装命令
$ sudo npm install -g hexo-cli
输入检验是否安装成功命令
$ hexo -v
若安装成功,会出现如下信息:
在 Mac 的 User 目录下新建文件夹,取名 Hexo
输入下面的命令,进入到 Hexo 目录下
$ cd Hexo/
输入下面命令,随后会在 Hexo 文件夹下简历网站所需要的所有文件
$ hexo init
现在,一个本地博客已经搭建成功,可以分别输入以下命令进行验证:
$ hexo g
–生成$ hexo s
–启动服务本地预览服务开启成功后到浏览器中输入 localhost:4000,这时候一个博客便映入眼帘。通过在终端输入Ctrl + C 可以停止本地预览
4. Github Pages 设置
该部分可参考博客 珞璃之神-基于Hexo-Github—搭建个人博客笔记 的第三部分「github Pages设置」
5. 更换博客主题
在第 2 部分预览的时候,默认加载的主题是「landscape」。不过个人感觉「next」主题似乎更好看。
自个体会下。
具体更换主题步骤如下:
复制主题,在终端输入以下命令
$ git clone https://github.com/iissnan/hexo-theme-next themes/next
配置 Hexo 目录下的 config.yml 配置文件中的 theme 属性,将其设置为 next
启用 next 主题
$ cd themes/next
–在终端上从 Hexo 根目录进入你复制的主题目录$ git pull
$ hexo clean
–清除默认的缓存主题$ hexo g
–生成$ hexo s
–启动本地预览到浏览器中输入 localhost:4000 查看 next 主题是否更换成功
至此,基于Github + Hexo 的博客也已经搭建成功!
6. 一键发布博客
接下来,教大家一键部署博客到 Github 的方法。
此部分完全参考博客 smartbeng-最适合新手的 GitHub + Hexo 「大话」博客搭建教程 ,内容如下:
进入 Hexo 的根目录 接着操作以下命令
$ cd Hexo
注意 1:现在我们需要clone我们自己的GitHub仓库了
注意 3:切记下面是你自己的仓库名 , 把名字都改过来 , 下面我用的是我的仓库名字
$ git clone https://github.com/storm/
strom.github.io.git .deploy/storm.github.io
翻译下这条命令的意思
将我们之前创建的GitHub 仓库克隆到本地 , 命令会新建一个目录叫做.deploy用于存放克隆的代码。
然后会在.deploy文件夹下生成一个 你的名字.github.io 的文件夹用于存放文件
接着在 Hexo 根目录下创建一个 .txt 文件 , 把下面的命令复制进去
注意 :你的GitHub名字是什么就把你的名字全部改到下面 , 细心点(下面加粗的部分就是待修改的地方)
hexo generate
cp -R public/ .deploy/*jacman.github.io
cd .deploy/jacman.github.io
git add .
git commit -m “update”
git push origin master
将这个 .txt 文件的后缀改成 .sh , 它就变成了脚本文件 , 我们就将文件改成 deploy.sh 吧!意思就是部署
从此以后需要部署本地博客到 GitHub , 直接把脚本拖入到终端运行即可。
该部分需要注意的事项:
- 脚本拖入终端运行时一定要切换到 Hexo 目录下
- 运行如显示 Permission denied 说明没有权限,此时需要对脚本进行赋予权限的操作:在终端输入chmod 777,接着拖入脚本,再按回车,权限赋予成功后再把脚本拖入终端运行即可(运行脚本一定要切换到 Hexo目录下)。
7. 总结
搭建博客过程中会踩到许多坑,其中很多问题都是由于没有切换到 Hexo 目录下造成的。若能在终端上切换到正确的目录下进行操作,搭建博客的过程也会顺利不少。